<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<!-- v-bind 指令操作元素属性 -->
			<p><input type="text" v-bind:id="id" v-bind:disabled="disabled" value=test></input></p>
			<p><a v-bind:href="url">baidu</a></p>
			<!-- v-bind缩写 -->
			<p><a :href="url">baidu简写</a></p>
			<!-- v-on缩写 -->
			<p><button v-on:click="click1" @click.stop='click2'>click</button></p>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: "#demo",
				data: {
					id: 'name',
					disabled: true,
					url: 'http://www.baidu.com',
					click1: function() {
						console.log("click1");
					},
					click2: function() {
						console.log("click2 stop");
					}
				}
			});
			vm.disabled = false;
		</script>

	</body>
</html>
